<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8">
    <title>第一个vue应用</title>
    <script src="../js/vue.min.2.7.0.js"></script>
</head>
<body>
<div id="app">
    <!--vue:事件修饰符 开始-->
    <!--
    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
    Vue.js通过由点(.)表示的指令后缀来调用修饰符。
    .stop
    .prevent
    .capture
    .self
    .once
     -->
    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    <!-- click 事件只能点击一次，2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>
    <!--vue:事件修饰符 结束-->

    <!--vue:按键修饰符 开始-->
    <!--Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：-->
    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.13="submit">
    全部的按键别名：
    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta
    实例:
    <!-- Alt + C的ASCll码为67 -->
    <input @keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>
    <!--vue:按键修饰符 结束-->
    
    <!--v-bind 缩写-->
    <!-- 完整语法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"></a>

    <!--v-on 缩写-->
    <!-- 完整语法 -->
    <a v-on:click="doSomething"></a>
    <!-- 缩写 -->
    <a @click="doSomething"></a>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
    });
</script>
</body>
</html>